// JavaScript Document

/**
 * @author : AgnesXu;
 * @date : 2016-12-19 12:19;
 * @used : host
 */ 

 //全选主机
$('.hC_hostTable th input').on('click',function(){
	if( $(this).is(':checked')){
		$('.hC_hostTable tr .hC_check').find('input').attr("checked",'true');
		$('.hC_hostTable tr td').css('color','#73b748');
	}else{
		$('.hC_hostTable tr .hC_check').find('input').removeAttr("checked");
		$('.hC_hostTable tr td').css('color','#777');
	}
});

//搜索更改颜色
$('.hC_search input[type=text]').on('focus',function(){
	$(this).css('color','#333');
});


//云主机详情tab
$('.hC_detailChoose span a').on('click',function(){
	$('.hC_detailChoose span').removeClass('grayBtn').addClass('grayBtn-o');
	$(this).parent('span').removeClass('grayBtn-o').addClass('grayBtn');
});

//云主机 tab
$('.hC_detailChoose .hostGeneral a').on('click',function(){
	$('.hC_detailMess').show();
	$('.hC_detailLine').hide();
});
$('.hC_detailChoose .hostMonitor a').on('click',function(){
	$('.hC_detailLine').show();
	$('.hC_detailMess').hide();
});

//创建主机
$('.hC_create a').on('click',function(){
	$('.popsHost').fadeIn();
});

$('.popsHost .popsTit a').on('click',function(){
	$('.popsHost').fadeOut();
});

//创建主机步骤
var i=3;
var a=0;
var num= 0;
// $(".popsHost_next a").on('click',function(){
//      i--;
//      num-=600;
//      a++;
//     if(i<0){
//     	return;
//     }
//     $('.popsHost_all').animate({left: num});
//     $('.popsHost_step li').eq(a).addClass('stepOn');
//     console.log(i,num,a);
// });

// $('.popsHost_pre a').on('click',function(){
// 	i++;
// 	num += 600;
// 	a--;
// 	if(i > 3){
// 		return;
// 	}
// 	console.log(i,num,a);
// 	$('.popsHost_step li').eq(a+1).removeClass('stepOn');
// 	$('.popsHost_all').animate({left: num});
// });

//创建主机 映像tab
$('.popsHost_tabel li').on('click',function(){
	$('.popsHost_tabel li').removeClass('popsHost_tabelOn');
	$(this).addClass('popsHost_tabelOn');
});



//云主机监控 折线图
var line1 = echarts.init(document.getElementById('line1'));
option = {
    title : {
        subtext: 'CPU'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['最高使用率','最低气温']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLabel : {
                formatter: '{value} °C'
            }
        }
    ],
    grid: {
	    x: 40,
	},
    color : ['#b5c334'],
    series : [
        {
            name:'最高使用率',
            type:'line',
            data:[11, 11, 15, 13, 12, 13, 10],
            x: 10,
            y: 10,
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        }
    ]
};                   
line1.setOption(option);

var line2 = echarts.init(document.getElementById('line2'));
option = {
    title : {
        subtext: 'CPU'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['最高使用率','最低气温']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLabel : {
                formatter: '{value} °C'
            }
        }
    ],
    grid: {
	    x: 40,
	},
    color : ['#fcce10'],
    series : [
        {
            name:'最高使用率',
            type:'line',
            data:[11, 11, 15, 13, 12, 13, 10],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        }
    ]
};                   
line2.setOption(option);

var line3 = echarts.init(document.getElementById('line3'));
option = {
    title : {
        subtext: 'CPU'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['最高使用率','最低气温']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLabel : {
                formatter: '{value} °C'
            }
        }
    ],
    grid: {
	    x: 40,
	},
    color : ['#e87c25'],
    series : [
        {
            name:'最高使用率',
            type:'line',
            data:[11, 11, 15, 13, 12, 13, 10],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        }
    ]
};                   
line3.setOption(option);

var line4 = echarts.init(document.getElementById('line4'));
option = {
    title : {
        subtext: 'CPU'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['最高使用率','最低气温']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLabel : {
                formatter: '{value} °C'
            }
        }
    ],
    grid: {
	    x: 40,
	},
    color : ['#c1232b'],
    series : [
        {
            name:'最高使用率',
            type:'line',
            data:[11, 11, 15, 13, 12, 13, 10],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        }
    ]
};                   
line4.setOption(option);

var line5 = echarts.init(document.getElementById('line5'));
option = {
    title : {
        subtext: 'CPU'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['最高使用率','最低气温']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLabel : {
                formatter: '{value} °C'
            }
        }
    ],
    grid: {
	    x: 40,
	},
    color : ['#27727b'],
    series : [
        {
            name:'最高使用率',
            type:'line',
            data:[11, 11, 15, 13, 12, 13, 10],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        }
    ]
};                   
line5.setOption(option);

var line6 = echarts.init(document.getElementById('line6'));
option = {
    title : {
        subtext: 'CPU'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['最高使用率','最低气温']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLabel : {
                formatter: '{value} °C'
            }
        }
    ],
    grid: {
	    x: 40,
	},
    color : ['#008acd'],
    series : [
        {
            name:'最高使用率',
            type:'line',
            data:[11, 11, 15, 13, 12, 13, 10],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        }
    ]
};                   
line6.setOption(option);